<template>
  <div>
    <pure-table :data="tabdata" :columns="initPureTableConfig(roleTableConfig)"  :isShowPag="false">
      <template #video="{ row }">
        <el-space>
          <sj-link custom-type="sblue" :underline="false" @click="viewImg(row.img)"><span class="mr-[10px]">照片({{
            row.img?.length ? row.img?.length : 0 }})</span></sj-link> <sj-link custom-type="sblue" :underline="false"
            @click="viedeoshow(row.video)"><span class="mr-[10px]">视频({{ row.video?.length ? row.video?.length : 0
              }})</span></sj-link>
        </el-space>
      </template>
    </pure-table>
    <el-image-viewer @close="closeImgViewer" :url-list="imageUrl" fit="none" v-if="showImageViewer" />
  </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { addDialog } from "@/components/ReDialog";
import { ElMessage } from "element-plus";
import viedeolists from "@/components/videoplay/videolistprop.vue"
import { ref } from "vue";
const tableData = ref({
  data: [{ id: 1 }]
});
const props = defineProps({
  tabdata: {
    type: Array,
    default: []
  }
});
const titles = {
  id: "编号", // id
  groupName: "所属分组", // workOrderTitle
  facilitName: "设施名称", // workOrderTitle
  projectName: "设施编号", // projectName
  workOrderType: "所属建筑", // workOrderType
  inspectionIssue: "巡检问题", // workOrderStatus
  video: "巡检信息", // waiting
};
const roleTableConfig = [
  // { type: "index", align: "left",label:"编号" },
  { prop: "id", label: titles.id, width:  100 },
  { prop: "groupName", label: titles.groupName,showOverflowTooltip:true  },
  { prop: "facilitName", label: titles.facilitName ,showOverflowTooltip:true },
  { prop: "projectName", label: titles.projectName ,showOverflowTooltip:true },
  { prop: "workOrderType", label: titles.workOrderType },
  { prop: "inspectionIssue", label: titles.inspectionIssue },
  { slot: "video", label: titles.video, width: 140 },
];
const showImageViewer = ref(false)
let imageUrl = []
const viewImg = url => {
  if (!url || url.length < 1) {
    ElMessage({
      message: "暂无图片",
      type: "warning",
    });
    return
  }
  imageUrl = url;
  showImageViewer.value = true;
};
const formRef = ref(null)
const viedeoshow = (url) => {
  if (!url || url.length < 1) {
    ElMessage({
      message: "暂无视频",
      type: "warning",
    });
    return
  }
  addDialog({
    title: `巡检视频`,
    hideFooter: true,
    width: "800px",
    draggable: true,
    fullscreen: false,
    props: {
      playlist: url
    },
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(viedeolists, { ref: formRef }),

  });
}
const closeImgViewer = () => {
  showImageViewer.value = false;
};
</script>
